﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Bing Maps Client Side Heat Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="/settings.js"></script>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>

    <!-- Use the excanvas control to add support for the HTML5 canvas element in IE7 and IE8 -->
    <!--[if lt IE 9]><script type="text/javascript" src="scripts/excanvas.min.js"></script><![endif]-->

    <script type="text/javascript">
        var map, heatMapLayer;

    function GetMap() {
      map = new Microsoft.Maps.Map(document.getElementById("divMap"),
           { credentials: 'YOUR_BING_MAPS_KEY' });

      // Register and load the Client Side HeatMap Module
      Microsoft.Maps.registerModule("HeatMapModule", "script/heatmap.js");
      Microsoft.Maps.loadModule("HeatMapModule", { callback: function() {
          heatMapLayer = new HeatMapLayer(map, []);
      }});
    }

    var testSize = 0,
        mockDataPoints = [],
        options = {
            radius: 10000,
            intensity: 0.65,
            radius: 10000,
            unit: "meters"
        },
        heatGradients = [
            {
                0.0: 'navy',
                0.25: 'blue',
                0.5: 'green',
                0.75: 'yellow',
                1.0: 'red'
            },
            {
                0.0: 'black',
                0.33: 'darkred',
                0.66: 'yellow',
                1.0: 'white'
            },
            {
                0.0: 'black',
                0.25: 'purple',
                0.5: 'red',
                0.75: 'yellow',
                1.0: 'white'
            },
            {
                0.0: 'red',
                0.66: 'yellow',
                1.0: 'white'
            },
            {
                0.0: 'navy',
                0.25: 'navy',
                0.25: 'green',
                0.5: 'green',
                0.5: 'yellow',
                0.75: 'yellow',
                0.75: 'red',
                1.0: 'red'
            }];

    function UpdateHeatMap() {
        var size = $('[name=TestDataSize]').val();

        if (size) {
            size = parseInt(size);
            testSize = (size >= 0) ? size : testSize;
        }

        var r = $('[name=Radius]').val();

        if (r) {
            r = parseInt(r);
            if (r >= 0) {
                options.radius = r * 1000;
            }
        }

        var intense = $('[name=Intensity]').val();

        if (intense) {
            intense = parseFloat(intense);
            if (intense >= 0) {
                options.intensity = intense;
            }
        }

        var opacity = $('[name=Opacity]').val();

        if (opacity) {
            opacity = parseFloat(opacity);
            if (opacity >= 0) {
                options.opacity = opacity;
            }
        }

        var hg = $('[name=HeatGradient]').val();

        if (hg) {
            hg = parseInt(hg);
            if (hg >= 0 && hg < heatGradients.length) {
                options.colourgradient = heatGradients[hg];
            }
        }

        if (testSize != mockDataPoints.length) {
            if (mockDataPoints.length > testSize) {
                mockDataPoints = mockDataPoints.splice(0, testSize);
            } else {
                for (var i = mockDataPoints.length; i < testSize; i++) {
                    mockDataPoints.push(new Microsoft.Maps.Location(Math.random() * 160 - 80, Math.random() * 360 - 180));
                }
            }

            heatMapLayer.SetOptions(options);
            heatMapLayer.SetPoints(mockDataPoints);
        } else {
            heatMapLayer.SetOptions(options, true);
        }
    }
    </script>
</head>
<body onload="GetMap();">
    <div id="divMap" style="position:relative; width:720px; height:480px;"></div><br />

    <fieldset style="width:720px;">
        <legend>Heat Map Options</legend>

        Test Data Size
        <select name="TestDataSize">
            <option value="500" />500
            <option value="1000" />1000
            <option value="5000" selected="selected" />5000
            <option value="10000" />10,000
            <option value="25000" />25,000
            <option value="50000" />50,000
            <option value="75000" />75,000
            <option value="100000" />100,000
        </select>

        Radius (KM)
        <select name="Radius">
            <option value="1" />1
            <option value="10" />10
            <option value="50" />50
            <option value="100" />100
            <option value="150" />150
            <option value="200" selected="selected" />200
            <option value="250" />250
        </select>

        Intensity
        <select name="Intensity">
            <option value="0.25" />0.25
            <option value="0.5" />0.5
            <option value="0.75" selected="selected" />0.75
            <option value="1" />1
        </select>

        Opacity
        <select name="Opacity">
            <option value="0.25" />0.25
            <option value="0.5" />0.5
            <option value="0.75" />0.75
            <option value="1" selected="selected" />1
        </select>

        Heat Gradient
        <select name="HeatGradient">
            <option value="0" selected="selected" />Color Spectrum
            <option value="1" />Incandescent
            <option value="2" />Heated Metal
            <option value="3" />Sunrise
            <option value="4" />Stepped Colors
        </select>

        <br />
        <input type="button" value="Update Heat Map" onclick="UpdateHeatMap()" />
    </fieldset>
</body>
</html>
